<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css 基本使用</title>

    <!-- 2. 内部样式表 写在styles 标签内部 少量， 本页面使用的样式 -->
    <style>
      /* <!-- 
    语法： 选择器 {样式}
    选择器希望将后面的样式应用给哪些元素
    --> */
      button {
        background-color: blueviolet;
        color: chartreuse;
      }
    </style>

    <!-- 3. 单独的css文件， 通过link 标签引入
    适合于，css文件多个页面需要使用 
    -->
    <link rel="stylesheet" href="./css/index.css">
  </head>
  <body>
    <!-- 1. 行内样式， styles 属性 = “样式名1： 值”； “样式名2 ： 值” -->
    <!-- css 的优先级： 就近原则， 目前行内优先级最高， 可以简单理解为上到下，优先级逐渐升高 -->
    <button style="background-color: aqua; color: red">点我</button>
    <button>购买</button>
    <button>一包</button>
    <button>纸巾</button>
  </body>
</html>
